<template>
    <div>
        <div class="searchForm " style="position: relative;">
            <div>
                日期： 
				<el-date-picker
				      v-model="time"
					  size="small"
					  value-format="yyyy-MM-dd"
				      type="daterange"
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期">
				</el-date-picker>
            </div>
            <div>
                商品名称： 
        		<el-input size="small" v-model="search_form.goods_name" 
        		placeholder="请输入商品名称"  
        		style="width:200px;"></el-input>
            </div>
            <div >
        		<div style="display: flex;">
        			<div>
        				供应商：
        			</div>
        			<div>
        				<selectCustomer :supp="search_form.supplier" 
						@getCustomerName="getCustomerName" />
        			</div>
        		</div>
            </div>
			<div>
			    <el-button type="primary" size="mini" @click="search">检索</el-button>
			    <el-button size="mini" @click="clearSearch">重置/检索</el-button>
			</div>
			<div>
				<el-select size="mini"
					style="margin-right: 10px;"
					v-model="brand" placeholder="请选择要查询的品牌">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
				<el-button type="primary" size="mini" 
					:loading="btnLoading"
					@click="find">查询</el-button>
				
			</div>
			<el-button type="primary" size="mini" @click="downLode"
				style="position: absolute;right: 30px;top: 18px;"
				>导出</el-button>
        </div>
        <br>
        <el-table stripe :data="list"  
			 ref="multipleTable"
			 @selection-change="handleSelectionChange"
			 border  
			>
			<el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
			<!-- <el-table-column  align="center"   prop="id" label="ID" /> -->
			<el-table-column  align="center"   prop="add_time" width="140" label="采购日期" />
			<el-table-column align="center" width="170"   prop="code" label="串号" />
			
			<el-table-column  align="center" width="260" prop="goods_name" label="商品名称" />
			<el-table-column  align="center" width="150"  prop="supplier" label="供应商" />
			<el-table-column  align="center"   prop="remark" label="备注" />
			<el-table-column  align="center" width="80" prop="actived" label="激活状态" />
			<el-table-column  align="center" width="100" prop="pre_actived" label="是否预激活" />
			<el-table-column  align="center" width="250" prop="model" label="机型" />
			<el-table-column  align="center" width="100" prop="capacity" label="容量" />
			<el-table-column  align="center" width="100" prop="color" label="颜色" />
			<el-table-column  align="center" width="100" prop="electronic_card" label="电子保卡" />
			<el-table-column  align="center" width="100" prop="warranty_status" label="保修状态" />
        </el-table>
		<div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="page_totle">
		    </el-pagination>
		</div>
    </div>
</template>
<script>
	import selectCustomer from '@/components/selectCustomer.vue'
    export default {
        components:{
			selectCustomer
        },

        data(){
            return {
				options:[
					{
						label:'苹果',
						value:'10101'
					},
					{
						label:'华为',
						value:'20101'
					},
					{
						label:'荣耀',
						value:'20601'
					}
				],
				list:[],
				pageSize:20,
				page:1,
				page_totle:0,
				search_form:{
					supplier:'',
					buyer_date:"",
					goods_name:"",
					start_time:"",
					end_time:"",
				},
				time:[],
				brand:'',
				btnLoading:false
            }
        },
        mounted(){
            document.title = '串号管理'
			// this.search_form.buyer_date = this.$utils.formatNowDate(2)
			let now = this.$utils.formatNowDate(2)
			this.time = [now,now]
			this.lodeList()
        },
        methods:{
			downLode(){
				if(this.time.length == 2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}else{
					this.search_form.start_time = ''
					this.search_form.end_time = ''
				}
				
				
				let cid = sessionStorage.getItem('cid')
				
				 var supplier
				 if(this.search_form.supplier){
					supplier = '&supplier=' + this.search_form.supplier
				 }else{
					supplier = '&supplier='
				 }
				 
				 var goods_name
				 if(this.search_form.goods_name){
				 	 goods_name = '&goods_name=' + this.search_form.goods_name
				 }else{
				 	 goods_name = '&goods_name='
				 }
				 
				 var start_time
				 if(this.search_form.start_time){
				 	 start_time = '&start_time=' + this.search_form.start_time
				 }else{
				 	 start_time = '&start_time='
				 }
				 
				 var end_time
				 if(this.search_form.end_time){
				 	 end_time = '&end_time=' + this.search_form.end_time
				 }else{
				 	 end_time = '&end_time='
				 }
				 
				
				let url = `${this.$domain}/excel/exportCode?cid=${cid}${supplier}${goods_name}${start_time}${end_time}`
				location.href = url
			},
			find(){
				if(this.selectGoods.length==0) return this.$message.error('请选择要查询的串号')
				if(!this.brand) return this.$message.error('请选择要查询的品牌')
				
				let arr = this.selectGoods.map(item=>{
					if(this.brand=='10101' && item.code[0]=='S'){
						item.code1 = item.code.slice(1,item.code.length)
					}else{
						item.code1 = item.code
					}
					item.key = this.brand
					return item
				})
				
				for(let ele of arr){
					this.btnLoading = true
					this.$post('/system/searchCodeStatus',[ele],res=>{
						this.btnLoading = false
						let result = res.data
						if(result.code==200){
							this.$message.success('操作成功')
							this.lodeList()
						}
					})
				}
				
				
			},
			getCustomerName(val){
				this.search_form.supplier = val
			},
			clearSearch(){
				this.search_form  = {
				        supplier:'',
				        buyer_date:"",
				        goods_name:"",
				        start_time:"",
				        end_time:"",
				}
				this.time = []
				this.page=1
				this.lodeList()
			},
            lodeList(){
				if(this.time.length == 2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}else{
					this.search_form.start_time = ''
					this.search_form.end_time = ''
				}
				let params = {
					search_form:this.search_form,
					page:this.page,
					pageSize:this.pageSize
				}
				this.$post('/buyerSys/getCodeList',params,res=>{
					let data = res.data.data
					this.page_totle = data.count
					for(let item of data.result){
						item.type=1
					}
					this.list = data.result
				})
			},            
        }
    }
</script>
